<template>
	<view class="container">
		<view class="payTypeBg">
			<view class="selectorBox">
				<view class="selectorHeader flex_r_sb_c">
					<view class="selectorHeaderLeft flex_r_fs_c flex_1" @click.stop="handleClose">
						<text class="iconfont iconleftArrow tc_e"></text>
					</view>
					<view class="selectorHeaderCenter flex_r_c_c flex_3">
						<text class="f_28 fw_500 tc_e">选择支付方式</text>
					</view>
					<view class="selectorHeaderRight flex_r_c_c flex_1"></view>
				</view>
				<view class="selectorCnt flex_c_fs_c">
					<block v-for="(item, index) in payType" :key="item.id">
						<view class="payTypeItem flex_r_sb_c" @click.stop="payTypeSelect(item, index)">
							<view class="itemLeft h100 flex_r_fs_c" :class="item.able?'tc_e':'tc_8'">
								<view class="h100 flex_c_fs_c">
									<text class="iconfont f_42 margin_r24" :class="item.icon"></text>
								</view>
								<view class="h100 flex_c_fs_fs">
									<view v-if="item.amount" class="f_30 fw_500 margin_b8">
										<text>{{item.name}}(剩余¥{{item.amount}})</text>
									</view>
									<view v-if="item.cardNo" class="f_30 fw_500 margin_b8">
										<text>{{item.name}}({{item.cardNo}})</text>
									</view>
									<view class="f_28 fw_500">
										<text>{{item.msg}}</text>
									</view>
								</view>
							</view>
							<view class="itemRight h100 flex_c_fs_fs">
								<text v-if="item.value === curPayType" class="iconfont iconright f_42 tc_g"></text>
							</view>
						</view>
					</block>
				</view>
				<view class="selectorFooter flex_r_sb_c" @click.stop="addBankCard">
					<view class="selectorFooterLeft flex_r_fs_c">
						<text class="iconfont iconbankCard f_48 tc_9 margin_r24"></text>
						<text class="f_30 fw_500 tc_e">添加新银行卡</text>
					</view>
					<view class="selectorFooterRight">
						<text class="iconfont iconrightArrow f_28 tc_8"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fr-paytype-selector",
		props: {
			// 支付方式列表
			payType: {
				type: Array,
				default: function() {
					return []
				}
			},
			// 当前支付方式
			curPayType:{
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			payTypeSelect(e, i) {
				e.able? this.$emit('handleSelect', e) : null
			},
			handleClose() {
				this.$emit('handleClose')
			},
			addBankCard() {
				this.$tool.msg('添加新银行卡')
			},
		},
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: calc(100vh - var(--window-top));
	.payTypeBg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:rgba(0,0,0,0.7);
		.selectorBox {
			width: 600rpx;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			background-color: #2c2c2c;
			border-radius: 24rpx;
			position: fixed;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
			.selectorHeader {
				width: 100%;
				height: 80rpx;
				margin-bottom: 32rpx;
			}
			.selectorCnt {
				width: 100%;
				padding-left: 12rpx;
				box-sizing: border-box;
				.payTypeItem {
					width: 100%;
					height: 120rpx;
				}
			}
			.selectorFooter {
				width: 100%;
				height: 120rpx;
				padding-left: 12rpx;
				box-sizing: border-box;
				.selectorFooterLeft {}
				.selectorFooterRight {}
			}
		}
	}
}
</style>
